<template>
    <div>
        <el-form>
            <el-card class="firstCard bottom10">
                <div class="content" style="margin-bottom: 20px;">
                    <div class="content-top">
                        <p class="title">监测类型</p>
                        <div class="monitor-row" style="posito">
                            <el-button type="primary" class="buttonStyle">保存</el-button>
                            <el-button class="buttonStyle">返回列表</el-button>
                        </div>
                    </div>
                    <div>
                        <el-radio v-model="monitorType" label="PING">PING</el-radio>
                        <el-radio v-model="monitorType" label="TCP">TCP</el-radio>
                        <el-radio v-model="monitorType" label="UDP">UDP</el-radio>
                    </div>
                </div>
                <div class="content">
                    <p class="title">监测对象</p>
                    <!-- PING -->
                    <div style="display: flex;flex-wrap: wrap;" v-if="monitorType=='PING'">
                        <div class="monitorObj-li removeFormLabelPadding" v-for="(item,index) in PINGList" :key="item">
                            <el-form-item class="marginRight20" label="监控名称：">
                                <el-input v-model="form.name" placeholder="请输入监测任务名称" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight10" label="任务地址：">
                                <el-input v-model="form.name" placeholder="请输入IP地址或域名地址" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-icon size="20" class="marginBottom18" v-if="index==PINGList.length-1">
                                <circle-plus />
                            </el-icon>
                        </div>
                    </div>
                    <!-- TCP -->
                    <div style="display: flex;flex-wrap: wrap;" v-if="monitorType=='TCP'">
                        <div class="monitorObj-li removeFormLabelPadding">
                            <el-form-item class="marginRight20" label="任务名称：">
                                <el-input v-model="form.name" placeholder="请输入监测任务名称" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight20" label="主机IP：">
                                <el-input v-model="form.name" placeholder="请填写应用主机IP地址" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight10" label="TCP端口：">
                                <el-input v-model="form.name" placeholder="请填写TCP端口，比如web服务端口 8080" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-icon size="20" class="marginBottom18">
                                <circle-plus />
                            </el-icon>
                        </div>
                    </div>
                    <!-- UDP -->
                    <div style="display: flex;flex-wrap: wrap;" v-if="monitorType=='UDP'">
                        <div class="monitorObj-li removeFormLabelPadding">
                            <el-form-item class="marginRight20" label="任务名称：">
                                <el-input v-model="form.name" placeholder="请输入监测任务名称" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight20" label="主机IP：">
                                <el-input v-model="form.name" placeholder="请填写应用主机IP地址" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item class="marginRight10" label="UDP端口：">
                                <el-input v-model="form.name" placeholder="请填写UDP端口，比如web服务端口 8080" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-icon size="20" class="marginBottom18">
                                <circle-plus />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="bottom10 setCardPadding">
                <div class="title1"><p>监测节点</p></div>
                <div class="content2">
                    <div class="monitor-point">
                        <el-radio-group v-model="monitorNode" @change="monitorNodeChange">
                            <el-radio-button label="自定义监测节点" style="font-size: 14px;"></el-radio-button>
                            <el-radio-button label="我的监测节点组" style="font-size: 14px;"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="monitor-checkbox" v-if="monitorNode=='自定义监测节点'">
                        <el-checkbox-group v-model="customNodeCheckedList">
                            <p v-for="item in customNodeList" :key="item"><el-checkbox :label="item.id">{{item.label}}</el-checkbox></p>
                        </el-checkbox-group>
                    </div>
                    <div v-if="monitorNode=='我的监测节点组'">
                        <transferIndex v-model="defaultData" keyName='rule_name' :rightCheckedData='rightCheckedData' :propData='propData'></transferIndex>
                    </div>
                </div>
            </el-card>
            <el-card class="bottom10 setCardPadding">
                <div class="title1"><p>监测参数</p></div>
                <div class="content1">
                    <div class="monitor-row">
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label width120 marginRight4">Package：</p>
                            <el-input-number class="width80 marginRight30"
                                v-model="package1"
                                controls-position="right"
                                :min="1"
                                :max="10"
                            ></el-input-number>
                        </div>
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label marginRight4">Ping次数：</p>
                            <el-input-number class="width80 marginRight6"
                                v-model="pingTimes"
                                controls-position="right"
                                :min="1"
                                :max="10"
                            ></el-input-number>
                            <p class="input-label marginRight30">次</p>
                        </div>
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label marginRight4">Ping间隔：</p>
                            <el-input-number class="width80 marginRight6"
                                v-model="pingInterval"
                                controls-position="right"
                                :min="1"
                                :max="10"
                            ></el-input-number>
                            <p class="input-label marginRight30">ms</p>
                        </div>
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label marginRight4">超时时间：</p>
                            <el-input-number class="width80 marginRight6"
                                v-model="overtime"
                                controls-position="right"
                                @change="handleChange"
                                :min="1"
                                :max="10"
                            ></el-input-number>
                            <p class="input-label marginRight30">s</p>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label width120 marginRight4">traceroute监测：</p>
                            <el-switch v-model="isOpenTraceroute" active-color="#0391FE" inactive-color="#DCDFE6"></el-switch>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label width120 marginRight4">最大跳跃数：</p>
                            <el-input-number class="width80 marginRight30"
                                v-model="num"
                                controls-position="right"
                                @change="handleChange"
                                :min="1"
                                :max="10"
                            ></el-input-number>
                        </div>
                        <div class="input-box">
                            <p class="input-label marginRight4">超时时间：</p>
                            <el-input-number class="width80 marginRight6"
                                v-model="num"
                                controls-position="right"
                                @change="handleChange"
                                :min="1"
                                :max="10"
                            ></el-input-number>
                            <p class="input-label">s</p>
                        </div>
                    </div>
                </div>
            </el-card>
            <!-- 监测周期 TCP -->
            <el-card class="bottom10 setCardPadding">
                <div class="title1"><p>监测周期</p></div>
                <div class="content1">
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4"><span class="opacity0">一</span> 有效期：</p>
                            <el-select v-model="value" placeholder="" style="width:106px;margin-right: 26px;padding: 0;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                        <div class="input-box monitor-select">
                            <el-date-picker
                                v-model="value1"
                                prefix-icon="el-icon-date"
                                type="datetimerange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                >
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4">监测频率：</p>
                            <el-select v-model="value" placeholder="" style="width:106px;margin-right: 6px;padding: 0;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="bottom10 setCardPadding">
                <div class="title1">
                    <p style="margin-right: 46px;">告警设置</p>
                    <p style="font-weight: normal;">开启告警：<el-switch v-model="isOpenWarning" active-color="#0391FE" inactive-color="#DCDFE6"></el-switch></p>
                </div>
                <div class="title1" style="border: none;margin-bottom: 0;">
                    <p>告警条件</p>
                </div>
                <div class="content1">
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4">取样间隔：</p>
                            <el-radio v-model="radio1" label="1">动态频率</el-radio>
                            <el-select v-model="value" placeholder="" style="width:80px;margin-right: 6px;padding: 0;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                >
                                </el-option>
                            </el-select>
                            <p class="input-label">频率</p>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4">性能指标：</p>
                            <el-select v-model="value" placeholder="" style="width:106px;margin-right: 6px;padding: 0;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <div class="input-box monitor-select">
                            <p class="input-label marginRight4 opacity0">取样间隔：</p>
                            <div class="warning-box">
                                <p>0ms</p>
                                <p class="warning-text"><svg-Icon name="icon-arrow" svgClass="arrow-svg" /><span style="color: #1CD689;">正常</span></p>
                                <p><el-input v-model="input" placeholder="" style="width: 66px;margin-bottom: 0;text-align:"></el-input></p>
                                <p>ms</p>
                                <p class="warning-text"><svg-Icon name="icon-arrow" svgClass="arrow-svg" /><span style="color: #F1AD46;">普通警告</span></p>
                                <p><el-input v-model="input" placeholder="" style="width: 66px;margin-bottom: 0;text-align:"></el-input></p>
                                <p>ms</p>
                                <p class="warning-text"><svg-Icon name="icon-arrow" svgClass="arrow-svg" /><span style="color: #FF5252;">严重警告</span></p>
                                <p><el-input v-model="input" placeholder="" style="width: 66px;margin-bottom: 0;text-align:"></el-input></p>
                                <p>ms</p>
                            </div>
                        </div>
                    </div>
                    <div class="monitor-row" style="margin-bottom: 20px;">
                        <p class="input-label marginRight4 opacity0">取样间隔：</p>
                        <el-button type="primary" plain class="add-button">添加条件</el-button>
                    </div>
                </div>
                <div class="title1" style="border: none;margin-bottom: 0;">
                    <p>告警通知</p>
                </div>
                <div class="content1">
                    <div style="display: flex;">
                        <div class="notice-li">
                            <p class="notice-label">邮件通知：</p>
                            <p class="notice-cont">
                                <el-input v-model="form.name" style="width: 260px;margin-right: 10px;"></el-input>
                                <el-icon size="20">
                                    <circle-plus />
                                </el-icon>
                            </p>
                        </div>
                        <div class="notice-li">
                            <p class="notice-label">钉钉通知：</p>
                            <p class="notice-cont">
                                <el-input v-model="form.name" style="width: 260px;margin-right: 10px;"></el-input>
                                <el-icon size="20">
                                    <circle-plus />
                                </el-icon>
                            </p>
                        </div>
                        <div class="notice-li">
                            <p class="notice-label">微信通知：</p>
                            <p class="notice-cont">
                                <el-input v-model="form.name" style="width: 260px;margin-right: 10px;"></el-input>
                                <el-icon size="20">
                                    <circle-plus />
                                </el-icon>
                            </p>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="bottom10 setCardPadding">
                <div class="title1"><p>设置异常点状态值</p></div>
                <div class="content1">
                    <div class="monitor-row" style="margin-bottom: 30px;">
                        <div class="input-box setInputNumberPadding">
                            <p class="input-label marginRight4">网络延时高于：</p>
                            <el-input-number class="width100 marginRight30"
                                v-model="num"
                                controls-position="right"
                                @change="handleChange"
                                :min="1"
                                :max="10"
                            ></el-input-number>
                        </div>
                        <!-- PING -->
                        <div class="input-box setInputNumberPadding" v-if="monitorType=='PING'">
                            <p class="input-label marginRight4">丢包率高于或等于：</p>
                            <el-input-number class="width100 marginRight6"
                                v-model="num"
                                controls-position="right"
                                @change="handleChange"
                                :min="1"
                                :max="10"
                            ></el-input-number>
                            <p class="input-label marginRight30">ms</p>
                        </div>
                        <!-- PING -->
                        <div class="input-box setInputNumberPadding" v-if="monitorType=='PING'">
                            <p class="input-label marginRight4">抖动延时高于：</p>
                            <el-input-number class="width100 marginRight6"
                                v-model="num"
                                controls-position="right"
                                @change="handleChange"
                                :min="1"
                                :max="10"
                            ></el-input-number>
                            <p class="input-label marginRight30">ms</p>
                        </div>
                    </div>
                    <div class="monitor-row">
                        <el-button type="primary" class="buttonStyle">保存</el-button>
                        <el-button class="buttonStyle">返回列表</el-button>
                    </div>
                </div>
            </el-card>
        </el-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch } from 'vue';
import { CirclePlus } from '@element-plus/icons'
import ETable from 'comps/eTable/index.vue';
import SvgIcon from 'svgIcon/SvgIcon.vue';
import TransferIndex from 'comps/transfer/index.vue';
export default defineComponent({
    name: 'taskList',
    components: { ETable, CirclePlus, SvgIcon, TransferIndex },
    setup() {
        let monitorType = ref('PING');
        let monitorNode = ref('自定义监测节点');
        const switchValue = ref(true);
        const radio1 = ref('自定义监测点');
        let data = reactive({
            PINGList: [1],
            customNodeList:[//自定义监测节点
                {
                    id: 1,
                    label: '选项一'
                },{
                    id: 2,
                    label: '选项二'
                }
            ],
            customNodeCheckedList: [],//选中的自定义监测节点
            package1: 2,//Package
            pingTimes: 2,//ping次数
            pingInterval: 2,//ping间隔
            overtime: 2,//超时时间
            isOpenTraceroute: true,//是否打开traceroute监测
            isOpenWarning: true  //是否开启告警
        })
        const inputChange = (v: String | Number) => {
            console.log(v);
        };
        const monitorNodeChange = (value:String) => {
            console.log(monitorNode);
        }
    
        let form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
        watch(
            ()=>data.customNodeCheckedList,
            (n:any)=>{
                console.log(n)
            }
        )
        return {
            monitorType,
            monitorNode,
            
            radio1,
            switchValue,
            inputChange,
            monitorNodeChange,
            form,
            ...toRefs(data)
        };
    }
});
</script>

<style lang="scss" scoped>
    .firstCard{
        --el-card-padding: 20px 20px 2px 20px;
    }
    .title{
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 14px;
    }
    .content-top{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: -5.2px;

    }
    .monitorObj-li{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .title1{
        padding-left: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ebeef5;
        display: flex;
        p{
            font-size: 14px;
            font-weight: bold;
        }
    }
    .content1{
        margin-left: 20px;
    }
    .content2{
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .monitor-checkbox{
        .el-checkbox-group{
            padding: 10px 16px;
            border: 1px solid #ebeef5;
            display: flex;
            flex-wrap: wrap;
            p{
                width: 200px;
            }
        }
    }
    .monitor-row{
        display: flex;
        margin-bottom: 18px;
    }
    .monitor-row:last-child{
        margin-bottom: 0;
    }
    .monitor-point{
        margin-bottom: 10px;
    }
    .width80{
        width: 80px;
    }
    .width100{
        width: 100px;
    }
    .width120{
        width: 120px;
    }
    .width300{
        width: 300px;
    }
    .input-box{
        display: flex;
    }
    .input-label{
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .marginRight4{
        margin-right: 4px;
    }
    .marginRight6{
        margin-right: 6px;
    }
    .marginRight10{
        margin-right: 10px;
    }
    .marginRight20{
        margin-right: 20px;
    }
    .marginRight30{
        margin-right: 30px;
    }
    .marginBottom18{
        margin-bottom: 18px;
    }
    .warning-box{
        display: flex;
        height: 32px;
        padding-bottom: 20px;
        p{
            width: auto;
            margin-right: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
        }
        input{
            text-align: center;
        }
    }
    .warning-text{
        span{
            display: inline-block;
            width: 100%;
            position: absolute;
            top: 30px;
            text-align: center;
        }
    }
    .add-button{
        width: 90px;
        height: 32px;
        font-size: 14px;
        background: #fff;
        padding: 0;
        line-height: 1.5;
    }
    .buttonStyle{
        width: 90px;
        height: 32px;
        font-size: 14px;
        padding: 0;
        line-height: 1.5;
    }
    .notice-li{
        width: 330px;
        .notice-label{
            font-size: 14px;
            display: flex;
            align-items: center;
            margin-bottom: 14px;
        }
        .notice-cont{
            display: flex;
            align-items: center;
            margin-bottom: 14px;
        }
        p:last-child{
            margin-bottom: 0px;
        }
    }
    //用于占位，元素不在页面上显示
    .opacity0{
        opacity: 0;
        color: #fff;
    }
    
</style>
<style lang="scss">
    .removeFormLabelPadding{
        label{
            padding: 0 6px 0 0;
        }
    }
    .setCardPadding{
        .el-card__body{
            padding: 20px 0;
        }
    }
    .monitor-select .el-radio{
        margin-right: 12px;
    }
    .monitor-select input{
        padding: 0 30px 0 6px;
        padding-right: 30px !important;
    }
    .monitor-point{
        .el-radio-button__inner{
            font-size: 14px;
            padding: 8.1px 15px;
        }
    }
    .warning-box input{
        padding: 0 6px;
        padding-right: 6px !important;
    }
    .setInputNumberPadding{
        .el-input-number.is-controls-right .el-input__inner {
            padding-left: 5px;
            padding-right: 40px;
        }
    }
    .input-box .warning-box input{
        text-align: center;
    }
    
</style>